<!-- 锚点渲染问题  解决中 -->
<template>
    <div class="ai-main">
        <div class="ai-container"></div>

        <div style="position:absolute;right:0;top:0;">
            <a-button @click="test">获取数据</a-button>
        </div>
    </div>
</template>

<script>
import G6 from '@antv/g6';
import registerElement from './element';
import registerBehavior from './behavior';

const renderData = {
    nodes: [
        {
            busData: { name: 'select_dataset', subType: 'dataset', type: 'metadata' },
            formData: {},
            id: '1Bh5pmj0001',
            label: '聚类特征选择',
            x: 340,
            y: 70,
            type: 'success',
            contextMenus: null,
            sourceName: '选择数据集',
            description: null,
            anchorConfig: { top: [{ linkFrom: null, name: '输入' }], bottom: [{ linkTo: null, name: '输出' }] },
            mappingFormData: {},
            logoIcon: { img: '/img/ia_metadata.f9ad9837.svg' },
            depth: 0,
        },
    ],
};

export default {
    inheritAttrs: false,
    props: {},
    data() {
        return {};
    },
    components: {},
    computed: {},
    watch: {},
    created() {},
    mounted() {
        this.initGraph();
    },

    methods: {
        test() {
            const item = this.flowGraph.get('selectedItems');
            console.error(item, '选中的 Items');

            const saveData = this.flowGraph.save();
            console.log(saveData, '模型数据');
        },

        initGraph() {
            if (!this.flowGraph) {
                const grid = new G6.Grid();
                const designerBox = this.$el.querySelector('.ai-container');
                const designerRect = designerBox?.getBoundingClientRect();
                this.flowGraph = new G6.Graph({
                    plugins: [grid],
                    container: designerBox,
                    width: designerRect?.width ?? 800,
                    height: designerRect?.height ?? 500,
                    defaultEdge: {
                        type: 'flow-cubic-round',
                    },
                    defaultNode: {
                        type: 'normal',
                    },
                    modes: {
                        default: ['drag-canvas', 'zoom-canvas'],
                        edit: [
                            'drag-canvas',
                            'zoom-canvas',
                            // 'dragNode',
                            // 'dragEdge',
                            'hoverNodeActived',
                            // 'hoverAnchorActived',
                            // 'elementSelected',
                            // {
                            //     type: 'nodeTooltip',
                            //     formatText: this.nodeFormatText,
                            // },
                        ],
                    },
                });
                registerElement(G6);
                registerBehavior(G6);

                // todo:  锚点问题尚未解决
                this.flowGraph.setMode('edit');

                console.log('g6 构建好了');
                this.renderGraph();
            }
        },
        renderGraph() {
            this.flowGraph.changeData(renderData);
        },
    },
};
</script>
<style lang="scss" scoped>
.ai-main {
    position: relative;
    overflow: hidden;
    user-select: none;

    .ai-container {
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
        position: relative;
        .g6-grid-container {
            z-index: 2;
        }
    }

    ::v-deep.context-menu {
        padding: 5px 0;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 1;
        z-index: 10;
        border-radius: 4px;
        -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        background-clip: padding-box;
        text-align: left;
        &.ant-menu-vertical {
            .ant-menu-item {
                padding: 0 12px;
            }

            > li.ant-menu-item,
            > li.ant-menu-submenu {
                height: 28px;
                line-height: 28px;
                font-size: 12px;
                color: #333333;
                margin-top: 0;
                margin-bottom: 0 !important;

                &:first-of-type {
                    margin-top: 1px;
                }
                &:last-of-type {
                    margin-bottom: 1px !important;
                }

                &:hover {
                    background-color: #e6f7ff;
                }

                .svg-icon {
                    font-size: 15px;
                    vertical-align: -0.25em;
                }

                .ant-menu-submenu-title {
                    height: 28px;
                    line-height: 28px;
                    font-size: 12px;
                    color: #333333;
                    margin-top: 0;
                    margin-bottom: 0 !important;
                    padding: 0 12px;

                    .svg-icon {
                        font-size: 15px;
                        vertical-align: -0.25em;
                    }
                }
            }
            > li.ant-menu-item-selected {
                background-color: #ffffff;
            }
        }
    }
    ::v-deep.g6-tooltip {
        pointer-events: none;
        &.arrow-top {
            margin-top: 8px;
            &:after {
                content: '';
                position: absolute;
                border: 6px solid transparent;
                border-bottom-color: rgb(33, 35, 43);
                top: 0;
                margin-top: -12px;
                left: 10px;
                pointer-events: none;
            }
        }
        &.arrow-bottom {
            margin-top: -8px;
            &:after {
                content: '';
                position: absolute;
                border: 6px solid transparent;
                border-top-color: rgb(33, 35, 43);
                bottom: 0;
                margin-bottom: -12px;
                left: 10px;
                pointer-events: none;
            }
        }
    }
    ::v-deep.g6-node-tooltip {
        border: 1px solid #17181d;
        border-radius: 4px;
        font-size: 12px;
        color: #ffffff;
        background-color: rgb(33, 35, 43);
        padding: 10px 8px;
        box-shadow: rgb(14, 14, 17) 0px 0px 6px;
        position: relative;
        min-width: 180px;
        max-width: 250px;
        table {
            tr {
                td {
                    word-break: break-all;
                    line-height: 1.8;

                    &:first-of-type {
                        white-space: nowrap;
                        vertical-align: top;
                    }
                }
            }
        }
    }
}
</style>
